<template>
<div>
    <!--表单-->
    {{spuForm}}

  <el-form :model="spuForm" label-width="70px">

    <el-form-item label="spu名称">
      <el-input v-model="spuForm.spuName"/>
    </el-form-item>

    <el-form-item label="品牌" prop="tmId">
      <el-select v-model="spuForm.tmId" placeholder="请选择">
        <el-option
          v-for="trademark in trademarkList"
          :key="trademark.id"
          :label="trademark.tmName"
          :value="trademark.id"/>
      </el-select>
    </el-form-item>

    <el-form-item label="spu描述">
      <el-input v-model="spuForm.description" :rows="5" type="textarea"/>
    </el-form-item>

    <el-form-item label="上传图片" >
      <el-upload
        :on-success="onUploadImageSuccess"
        :before-upload="beforeUpload"
        :on-remove="onUploadImageRemove"
        :multiple="true"
        action="http://localhost:8086/admin/product/fileUpload"
        class="upload-demo"
        list-type="picture-card">
        <i class="el-icon-plus"/>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png/gif文件，且不超过2MB</div>
      </el-upload>
    </el-form-item>

    <div style="margin-top: 10px">&nbsp;</div>
    <el-form-item label="上传海报" >
      <el-upload
        :on-success="onUploadPosterSuccess"
        :before-upload="beforeUpload"
        :on-remove="onUploadPosterRemove"
        :multiple="true"
        action="http://localhost:8086/admin/product/fileUpload"
        class="upload-demo"
        list-type="picture-card">
        <i class="el-icon-plus"/>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png/gif文件，且不超过2MB</div>
      </el-upload>
    </el-form-item>

    <!--按钮-->
    <div style="margin-top:22px;">
      <el-button type="primary" size="mini" @click="saveSpuInfo()">保存</el-button>
      <el-button type="default" size="mini" @click="backToSpuList()">返回</el-button>
    </div>

  </el-form>
  </div>
</template>

<script>
import * as categoryTrademarkApi from '../../../api/product/categoryTrademark.js'
import spuApi from '../../../api/product/spu.js'

export default {
    data(){
        return{
            spuForm:{
              spuName:'',
              description:'',
              tmId:'',
              category3Id:'',
              spuImageList:[],
              spuPosterList:[]
            },
            trademarkList:[],
        }
    },
    methods:{
        init(category3Id){
          this.spuForm.category3Id = category3Id;
          this.findTrademarkList(category3Id);
        },
        backToSpuList(){
            this.$emit('backToSpuListEvent_2109A');//子组件发送事件到父组件
        },
        findTrademarkList(category3Id){
          categoryTrademarkApi.findTrademarkList(category3Id).then(res=>{
            if(res.data.ok){
              this.trademarkList = res.data.data;
              console.log(this.trademarkList)
            }else{
              this.trademarkList=[];
            }
          })
        },
        beforeUpload(file){
          const isPNG = file.type === 'image/png';
          const isLt2M = file.size / 1024 / 1024 < 2;

          if (!isPNG) {
            this.$message.error('上传头像图片只能是 isPNG 格式!');
          }
          if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
          }
          return isPNG && isLt2M;
        },
        onUploadImageSuccess(res, file, fileList){
          console.log(res)
          this.spuForm.spuImageList.push({imgName:file.name,imgUrl:res.data})
        },
        onUploadImageRemove(file, fileList){
          let imageUrl = file.response.data;

          /*
          for(let i in this.spuForm.spuImageList){
            if(this.spuForm.spuImageList[i].imgUrl == imageUrl){
              this.spuForm.spuImageList.splice(i,1);//从 i 位置，删除1个
            }
          }*/

          this.spuForm.spuImageList = this.spuForm.spuImageList.filter((a)=>{return a.imgUrl!==imageUrl})
        },
        onUploadPosterSuccess(res, file, fileList){
            this.spuForm.spuPosterList = fileList.map(e=>{
              return {imgName:file.name,imgUrl:e.response.data} ;
            })
        },
        onUploadPosterRemove(file, fileList){
           this.spuForm.spuPosterList = fileList.map(e=>{
              return {imgName:file.name,imgUrl:e.response.data} ;
            })
        },
        saveSpuInfo(){
          debugger
          spuApi.saveSpuInfo(this.spuForm).then(res=>{
            debugger
            this.$emit('saveSpuInfoEvent_2109A');//子组件发送事件到父组件
          })
        }
    }
    
}
</script>

<style>

</style>


